<template>
	<view>
		<scroll-view scroll-x="true" class="cate" scroll-left="120">
			<view class="cate-item" v-for="(item,index) in cateList" :key='index' :class="cateActive == index ? 'active' : '' "
			 @click='cateChange(index)'>{{item.title}}</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateActive: 0,
				cate_id: 0
			};
		},
		props: {
			cateList: {
				type: [Array, Object],
				default: () =>{
					return [{
							'id': 0,
							'title': '全部'
						},
						{
							'id': 1,
							'title': '白坯'
						},
						{
							'id': 2,
							'title': '纱线'
						},
						{
							'id': 3,
							'title': '染化料'
						}
					];
				}
			}
		},
		methods: {
			//分类切换
			cateChange(index) {
				this.cateActive = index;
				let cate_id = this.cateList[index].id;
				this.$emit('cateChange', cate_id);
			}
		}
	}
</script>

<style>
	.cate {
		margin: 20upx 0;
		white-space: nowrap; // 滚动必须加的属性
		display: flex;
	}

	.cate-item {
		width: 100upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		display: inline-block;
		padding: 0 30upx;
		color: rgb(51, 51, 51)
	}

	.active {
		color: #007AFF;
		border-bottom: 2px solid #007AFF;
	}
</style>
